<template>
    <div>

        <el-card class="box-card">
            <div slot="header" class="clearfix rowSpaceBetweenAlignCenter">
                <span class="noselect">笔记列表</span>
                <div class="rowStartAlignCenter">
                    <el-button type="primary" icon="el-icon-refresh" size="small" plain @click="rebuildList"></el-button>
                </div>
            </div>
            
            <div class="minHeight600px">
                <el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%;" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>

                    <el-table-column label="#" width="70">
                        <template slot-scope="scope">{{ scope.row.id }}</template>
                    </el-table-column>

                    
                    <el-table-column label="标题">
                        <template slot-scope="scope">
                            <span>{{ scope.row.title }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="author_name" label="作者" width="120"></el-table-column>

                    <el-table-column prop="create_time" label="创建时间" width="180"></el-table-column>

                    <el-table-column label="开放状态">
                        <template slot-scope="scope">
                            <span>{{ scope.row.status? '开放':'私人' }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="推荐状态">
                        <template slot-scope="scope">
                            <span>{{ scope.row.recommand? '推荐':'-' }}</span>
                            <el-button type="primary" icon="el-icon-sort" circle plain size="mini" class="marginLeft10" @click="toggleRecommand(scope.row.id)"></el-button>
                        </template>
                    </el-table-column>

                    <el-table-column label="审核状态">
                        <template slot-scope="scope">
                            <span>{{ scope.row.verify? '通过':'待审' }}</span>
                            <el-button type="primary" icon="el-icon-sort" circle plain size="mini" class="marginLeft10" @click="toggleVerify(scope.row.id, scope.row.verify)"></el-button>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" fixed="right" width="180">
                        <template slot-scope="scope">
                            <el-button type="primary" plain size="small" @click="$router.push({
                                path: '/notes/detail',
                                query: { id: scope.row.id }
                            })">查看</el-button>

                            <el-button type="danger" plain size="small" @click="clickDeleteNotes(scope.row.id)">删除</el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- <div style="margin-top: 20px">
                <el-button @click="clickMultiActive()">激活用户</el-button>
                <el-button @click="clickMultiDisable()">冻结用户</el-button>
            </div> -->

        </el-card>

       
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <span>确定要删除笔记吗？</span>
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="toggleDialogVisible">取 消</el-button>
                <el-button type="primary" @click="realDeleteNotes">确 定</el-button>
            </span>
        </el-dialog>
        
    </div>
</template>



<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
import { apiListNotes, apiDeleteNotes, apiRejectNotes, apiPassNotes, apiToggleRecommandNotes } from '@/api/admin'
export default {
    data() {
        return {
            list: [],
            selectUs: [],
            dialogVisible: false,
            deleteId: 0
        }
    },
    computed: {

    },
    methods: {
        // 弹窗切换
        toggleDialogVisible () {
            this.dialogVisible = !this.dialogVisible
        },

        // 切换选择
        toggleSelection(rows) {
            if (rows) {
                // 单行反选
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row)
                });
            } else {
                // 清空选择
                this.$refs.multipleTable.clearSelection()
            }
        },

        // 选择变化后的回调
        handleSelectionChange(val) {
            this.selectUs = val
        },

        

        // 查看笔记详情
        clickDetailNotes (id) {
            this.fn.clog('查看笔记详情')
            this.$router.push({
                path: '/notes/detail',
                query: { id: id }
            })
        },

        // 删除笔记
        clickDeleteNotes (id = 0) {
            this.fn.clog('删除笔记')
            this.deleteId = id
            this.toggleDialogVisible()
        },
        realDeleteNotes () {
            this.toggleDialogVisible()
            apiDeleteNotes({id: this.deleteId}).then(res=>{
                this.rebuildList()
            }).catch(e=>{
                this.fn.eWarning(JSON.stringify(e))
            })
        },

        // 切换推荐状态
        toggleRecommand (id) {
            this.fn.clog('切换推荐状态')
            apiToggleRecommandNotes({id: id}).then(res=>{
                this.rebuildList()
            }).catch(e=>{
                this.fn.eWarning(JSON.stringify(e))
            })
        },
        // 切换审核状态
        toggleVerify (id, nowStatus = 0) {
            if (!nowStatus) {
                // 通过
                apiPassNotes({id: id}).then(res=>{
                    this.rebuildList()
                }).catch(e=>{
                    this.fn.eWarning(JSON.stringify(e))
                })
            } else {
                // 拒绝
                apiRejectNotes({id: id}).then(res=>{
                    this.rebuildList()
                }).catch(e=>{
                    this.fn.eWarning(JSON.stringify(e))
                })
            }
        },

        

        // 重新加载列表
        async rebuildList () {
            this.list = []
            this.$nextTick(() => {
                apiListNotes().then(res => {
                    this.fn.clogJsons(res)
                    this.list = res.data
                }).catch(e => {
                    this.fn.eWarning
                })
            })
        },

    },
    mounted() {
        this.rebuildList()
    }
}
</script>